<template>
    <div class="container" v-if="$route.query.id">
        <!-- <Nav></Nav> -->
        <main class="main">
            <Suspense>
                <template #default>
                    <Lyric></Lyric>
                </template>
                <template #fallback>
                    <loading></loading>
                </template>
            </Suspense>
            <!-- <Aside></Aside>  -->
        </main>
        <UserFooter />
    </div>
    <Error404 v-else/>
</template>

<script setup>
    import { defineAsyncComponent } from 'vue';
    // 组件
    import Error404 from '../error/404.vue'
    // import Nav from '../discover/Nav.vue';
    import UserFooter from '../header/user/header_bottom/UserFooter.vue';
    // import Aside from './Aside.vue';
    // import ListRanking from '../discover/listRanking/ListRanking.vue';

    // import Lyric from '../song/Lyric.vue';
    const Lyric = defineAsyncComponent(() => import('./Lyric.vue')) 

</script>

<style lang='less' scoped>
    main{
        display: flex;
    }
</style>



